<template>
  <div id="waterquality-water-quality-indicator">
    <div class="operate-list">
      <t-button @click="addVisible = true">新增水质指标表</t-button>
      <div class="search-input">
        <t-input-adornment>
          <template #prepend>
            <t-select v-model="searchType" default-input-value="name" style="width: 120px" @change="onSearchTypeChange">
                            <t-option key="unitId" label="单位id" value="unitId"></t-option>
                            <t-option key="unitName" label="单位名称（巡查单位）" value="unitName"></t-option>
                            <t-option key="fillDate" label="填表日期" value="fillDate"></t-option>
                            <t-option key="createDate" label="创建时间" value="createDate"></t-option>
                            <t-option key="createId" label="上传人" value="createId"></t-option>
                            <t-option key="updateDate" label="更新时间" value="updateDate"></t-option>
                            <t-option key="updateId" label="修改人" value="updateId"></t-option>
                            <t-option key="province" label="省份" value="province"></t-option>
                            <t-option key="city" label="市" value="city"></t-option>
                            <t-option key="district" label="区" value="district"></t-option>
                            <t-option key="county" label="街道" value="county"></t-option>
                            <t-option key="community" label="社区" value="community"></t-option>
                            <t-option key="longitude" label="经度" value="longitude"></t-option>
                            <t-option key="latitude" label="纬度" value="latitude"></t-option>
                            <t-option key="waterQualityData" label="水质指标基础详细数据" value="waterQualityData"></t-option>
                          </t-select>
          </template>
          <t-input v-model="searchValue" placeholder="请输入内容搜索" clearable @change="onSearchChange">
            <template #suffixIcon>
              <search-icon :style="{ cursor: 'pointer' }" />
            </template>
          </t-input>
        </t-input-adornment>
      </div>
    </div>
    <t-table
      row-key="id"
      :loading="tableLoading"
      :data="data"
      :columns="columns"
      vertical-align="top"
      hover
      :max-height="tableHeight"
      :pagination="pagination"
      @page-change="onPageChange"
    >
      <template #time="{ row }">
        {{ moment.unix(row.updatedat).format('YYYY-MM-DD') }}
      </template>
      <template #opt="{ row }">
        <t-button size="small" variant="text" theme="primary" @click="handleInformation(row)">详情</t-button>
      </template>
    </t-table>
  </div>
  <add-recrption v-model:visibles="addVisible" @success="handleSuccess" />
  <info-recrption v-model:visibles="infoVisible" :information="information" />
</template>

<script setup lang="ts">
import moment from 'moment';
import { SearchIcon } from 'tdesign-icons-vue-next';
import { onMounted, ref } from 'vue';

import {getList, getInfo, doDelete, doUpdate, doCreate } from '@/api/platform/waterquality/water/quality/indicator';

import AddForm from '../components/addForm.vue';
import InfoForm from '../components/infoForm.vue';

let searchAfterTimeout: NodeJS.Timeout = null;
const data: any = ref([]);
const tableLoading = ref(false);
const tableHeight = ref('');
const searchValue = ref('');
const searchType = ref('');
const addVisible = ref(false);
const infoVisible = ref(false);
const information = ref({});
const queryParameters: any = ref({
  pageOrderName: 'createdAt',
  pageOrderBy: 'descending',
});
const pagination = ref({
  pageSize: 10,
  total: 0,
  defaultCurrent: 1,
  current: 1,
  pageSizeOptions: ['5', '10', '15', '20'],
});
const columns: any = ref([
    { colKey: 'unitId', title: '单位id', width: 120, ellipsis: true },
    { colKey: 'unitName', title: '单位名称（巡查单位）', width: 120, ellipsis: true },
    { colKey: 'fillDate', title: '填表日期', width: 120, ellipsis: true },
    { colKey: 'createDate', title: '创建时间', width: 120, ellipsis: true },
    { colKey: 'createId', title: '上传人', width: 120, ellipsis: true },
    { colKey: 'updateDate', title: '更新时间', width: 120, ellipsis: true },
    { colKey: 'updateId', title: '修改人', width: 120, ellipsis: true },
    { colKey: 'province', title: '省份', width: 120, ellipsis: true },
    { colKey: 'city', title: '市', width: 120, ellipsis: true },
    { colKey: 'district', title: '区', width: 120, ellipsis: true },
    { colKey: 'county', title: '街道', width: 120, ellipsis: true },
    { colKey: 'community', title: '社区', width: 120, ellipsis: true },
    { colKey: 'longitude', title: '经度', width: 120, ellipsis: true },
    { colKey: 'latitude', title: '纬度', width: 120, ellipsis: true },
    { colKey: 'waterQualityData', title: '水质指标基础详细数据', width: 120, ellipsis: true },
    { colKey: 'opt', title: '操作', width: 120, align: 'center' },
]);

const emits = defineEmits(['refresh']);

onMounted(() => {
  tableHeight.value = document.getElementById('waterquality-water-quality-indicator').clientHeight;
  fetchData();
});

const fetchData = async () => {
  tableLoading.value = true;
  await getList({
    pageNo: pagination.value.current,
    pageSize: pagination.value.pageSize,
    ...queryParameters.value,
  }).then((res) => {
    data.value = res.list.map((item: any) => {
      item.switchLoading = false;
      return item;
    });
    pagination.value.total = res.totalCount;
    pagination.value.current = res.pageNo;
  });
  tableLoading.value = false;
};


const onSearchTypeChange = (value: string) => {
  searchType.value = value;
  if (value === 'siteName') {
    queryParameters.value.siteName = searchValue.value;
    queryParameters.value.siteCode = '';
  } else {
    queryParameters.value.siteCode = searchValue.value;
    queryParameters.value.siteName = '';
  }
  fetchData();
};

const handleSuccess = () => {
  fetchData();
};

const handleInformation = (row: any) => {
  information.value = row;
  infoVisible.value = true;
};

const onPageChange = async (page: { current: number; pageSize: number }) => {
  pagination.value.pageSize = page.pageSize;
  pagination.value.current = page.current;
  await fetchData();
};

const onSearchChange = (value: string) => {
  // 连续输入时重置计时，计时结束执行搜索
  clearTimeout(searchAfterTimeout);
  searchAfterTimeout = setTimeout(() => {
    // 页码重置为1
    pagination.value.current = 1;
    searchValue.value = value;
    queryParameters.value = {
      pageNo: 1,
      pageSize: 10,
      totalCount: 0,
      pageOrderName: 'createdAt',
      pageOrderBy: 'descending'
    }
    queryParameters.value[searchType.value] = searchValue.value;
    fetchData();
  }, 300);
};
</script>

<style scoped lang="less">
#waterquality-water-quality-indicator {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px;

  > .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .operate-list {
    margin: 16px 0 16px;
    display: flex;
    justify-content: space-between;
    .search-input {
      width: 400px;
    }
  }

  :deep(.t-table) {
    height: calc(100% - var(--td-comp-size-m) - 30px);
  }
  :deep(.t-table td button.t-button) {
    height: var(--td-line-height-body-medium);
  }
}
</style>
